<template>
  <div class="inform w">
    <div class="left">
      <h1 class="title">
        <i class="el-icon-s-order" style="color: skyblue;"></i>
        <a href="#">公示公告</a>
      </h1>
      <ul>
        <li v-for="(item, index) in noticeList" :key="index">
          <a :href="item.link">{{ item.text }}</a>
          <time>{{ item.date }}</time>
        </li>
      </ul>
    </div>
    <div class="right">
      <h1 class="title">
        <i class="el-icon-message-solid" style="color: skyblue;"></i>
        <a href="#">学院通知</a>
      </h1>
      <ul>
        <li v-for="(item, index) in messageList" :key="index">
          <a :href="item.link">{{ item.text }}</a>
          <time>{{ item.date }}</time>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Notice',
  data() {
    return {
      // 公示公告数据
      noticeList: [
        { text: "2019年3月份计算机等级考试通知", date: "2019-2-2", link: "" },
        { text: "2019年3月份计算机等级考试通知", date: "2019-2-2", link: "" },
        { text: "2019年3月份计算机等级考试通知", date: "2019-2-2", link: "" },
        { text: "2019年3月份计算机等级考试通知", date: "2019-2-2", link: "" },
        { text: "2019年3月份计算机等级考试通知", date: "2019-2-2", link: "" },
        { text: "2019年3月份计算机等级考试通知", date: "2019-2-2", link: "" }
      ],
      // 学院通知数据
      messageList: [
        { text: "2019年3月份计算机等级考试通知", date: "2019-3-3", link: "" },
        { text: "2019年3月份计算机等级考试通知", date: "2019-3-3", link: "" },
        { text: "2019年3月份计算机等级考试通知", date: "2019-3-3", link: "" },
        { text: "2019年3月份计算机等级考试通知", date: "2019-3-3", link: "" },
        { text: "2019年3月份计算机等级考试通知", date: "2019-3-3", link: "" },
        { text: "2019年3月份计算机等级考试通知", date: "2019-3-3", link: "" }
      ],
    }
  },
}
</script>

<style scoped>
.inform {
  display: flex;
}

.inform .left {
  flex: 1;
}

.inform .right {
  flex: 1;
}

.inform li {
  margin-bottom: 30px;
}

.inform li:nth-child(1) {
  margin-top: 30px;
}

.inform a {
  color: #2c3338;
}

.inform time {
  color: rgb(189, 180, 180);
  float: right;
  margin-right: 90px;
}
</style>